<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.0-beta2.js"></script>
    <script>
      function writeMessage(messageLayer, message) {
        var context = messageLayer.getContext();
        messageLayer.clear();
        context.font = '18pt Calibri';
        context.fillStyle = 'black';
        context.fillText(message, 10, 25);
      }
      function loadImages(sources, callback) {
        var assetDir = 'images/';
        var images = {};
        var loadedImages = 0;
        var numImages = 0;
        for(var src in sources) {
          numImages++;
        }
        for(var src in sources) {
          images[src] = new Image();
          images[src].onload = function() {
            if(++loadedImages >= numImages) {
              callback(images);
            }
          };
          images[src].src = assetDir + sources[src];
        }
      }
      function initStage(images) {
        var stage = new Kinetic.Stage({
          container: 'container',
          width: 578,
          height: 200
        });

        var shapesLayer = new Kinetic.Layer();
        var messageLayer = new Kinetic.Layer();

        var rect = new Kinetic.Rect({
          x: 0,
          y: 0,
          width: 400,
          height: 200,
          fill: 'red',
          stroke: 'black',
          strokeWidth: 4
        })

        var monkey = new Kinetic.Image({
          image: images.monkey,
          x: 120,
          y: 50
        });

        var lion = new Kinetic.Image({
          image: images.lion,
          x: 280,
          y: 30
        });

        monkey.on('mouseover', function() {
          writeMessage(messageLayer, 'mouseover monkey');
        });

        monkey.on('mouseout', function() {
          writeMessage(messageLayer, '');
        });

        lion.on('mouseover', function() {
          writeMessage(messageLayer, 'mouseover lion');
        });

        lion.on('mouseout', function() {
          writeMessage(messageLayer, '');
        });

        lion.createImageHitRegion(function() {
          shapesLayer.drawHit();
        });
        shapesLayer.add(rect);
        shapesLayer.add(monkey);
        shapesLayer.add(lion);
        stage.add(shapesLayer);
        stage.add(messageLayer);
      }
      var sources = {
        lion: 'lion.png',
        monkey: 'monkey.png'
      };
      loadImages(sources, initStage);

    </script>
  </body>
</html>